<template>
<el-card>
    <el-table :data="list" :header-cell-style="tableHeader" border  style="width: 100%" tooltip-effect="light" v-loading="loadingTable">
        <el-table-column type="index" label="序号" min-width="36" align="center"></el-table-column>
        <el-table-column v-for="item in columns" 
            show-overflow-tooltip  
            :key="item.key" 
            :label="item.title" 
            align="center" 
            :min-width="item.width"  
           >
            <template #default="scope">
                <el-link v-if="item.dataKey ==='business_name'" type="primary" :underline="false" @click="goTo({business_id:scope.row['business_id']})">{{ scope.row[item.dataKey] }}</el-link>
                <span v-else-if="item.dataKey ==='allocation_time'">{{ formatTime(scope.row[item.dataKey]) }}</span>
                <span v-else-if="item.dataKey ==='order_status'">{{ formatStatus(scope.row[item.dataKey]) }}</span>
                <span v-else> {{ scope.row[item.dataKey] }}</span>
            </template>

        </el-table-column>
    </el-table>
    <div class="padding-top-14">
        <el-pagination 
            v-model:current-page="postData.page"
            :total="totalNum"
            v-model:page-size="postData.size"
            :pager-count="7"
            :page-sizes="[10,20,30]"
            layout="->, total, prev, pager, next,sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            background></el-pagination>
    </div>
</el-card>
</template>
<script setup lang="ts">
import "@/style/modules/users.scss";
import {tableHeader,orderStatus} from '@/utils/users/pubConfig';
import type {Column} from '@/utils/users/pubConfig';
import { businessListPath } from '@/config/paths';
import {  dayjs } from 'element-plus';
import router from "@/router";
const columns=ref<Column[]>([
    {
        key:'allocation_user_id',
        title:'分配人员ID',
        dataKey:'allocation_user_id'
    },
    {
        key:'allocation_user_name',
        title:'分配人员姓名',
        dataKey:'allocation_user_name',
        width:'80'
    },
    {
        key:'secondary_account',
        title:'二级',
        dataKey:'secondary_account'
    },
    {
        key:'business_name',
        title:'企业名称',
        dataKey:'business_name'
    },
    {
        key:'allocation_time',
        title:'分配时间',
        dataKey:'allocation_time'
    },
    {
        key:'allocation_days',
        title:'分配天数',
        dataKey:'allocation_days',
        width:'60'
    },
    {
        key:'allocation_users',
        title:'分配人数',
        dataKey:'allocation_users',
        width:'60'
    },
    {
        key:'return_days',
        title:'返还天数',
        dataKey:'return_days',
        width:'60'
    },
    {
        key:'return_users',
        title:'返还人数',
        dataKey:'return_users',
        width:'60'
    },
    {
        key:'operate_reason',
        title:'操作原因',
        dataKey:'operate_reason'
    },
    {
        key:'order_id',
        title:'订单号',
        dataKey:'order_id'
    },
    {
        key:'order_status',
        title:'订单状态',
        dataKey:'order_status'
    }

])
interface AllocationInfo{
    allocation_user_id:string,
    allocation_user_name:string,
    secondary_account:string,
    business_name:string,
    business_id:string,
    allocation_time:string,
    allocation_days:number,
    allocation_users:number,
    return_days:number,
    return_users:number,
    operate_reason:string,
    order_id:string,
    order_status:number
}
const list=ref<AllocationInfo[]>(
    [{
        allocation_user_id:'',
        allocation_user_name:'',
        secondary_account:'',
        business_name:'',
        business_id:'',
        allocation_time:'',
        allocation_days:0,
        allocation_users:0,
        return_days:0,
        return_users:0,
        operate_reason:'',
        order_id:'',
        order_status:0
    }]
)
interface PostData{
    page:number,
    size:number
}
const loadingTable=ref<boolean>(false)
const postData=ref<PostData>({page:1,size:15})
const totalNum=ref<number>(0)
const formatTime=computed(()=>{
    return (value:string)=>{
        if(value){
            return dayjs(value).format(`YYYY-MM-DD HH:mm:ss`)
        }
    }
})
const formatStatus=computed(()=>{
    return (value:string)=>{
        if(value){
            return orderStatus[value].text
        }
    }
})

onMounted(async()=>{
    list.value=[]
    const {total,allocation_infos}= await getList()
    // console.log('onMountget',total,allocation_infos)
    list.value=allocation_infos
    totalNum.value=total
}
)
async function getList(){
    loadingTable.value=true
   const {data}= await baseRequest.post(businessListPath.value,postData.value)
   loadingTable.value=false
   return data
}
async function handleSizeChange(val:number){
    postData.value.size=val
    postData.value.page=1
    const {allocation_infos}=await  getList()
    list.value=allocation_infos
}
async function handleCurrentChange(val:number) {
    postData.value.page=val
    const {allocation_infos}=await getList()
    list.value=allocation_infos
}
function goTo({business_id}){
// console.log('all',business_id)
router.push({path:`/business/businessAllocationPurchase/${business_id}`,query:{business_id}})
}
</script>